---
export const prerender = false
import {getEntry} from "astro:content";
import BaseLayout from "@/layouts/BaseLayout.astro";
import {markedLine} from "@/utils/markedUtil";

const entry = await getEntry("contact", "index");
const {title, description, info} = entry?.data;
import {actions} from 'astro:actions';
const result = Astro.getActionResult(actions.contact_message);
---

<BaseLayout title={title} description={description}>

    <section class="section">
        <div class="container">
            { result && !result.error && <div class="bg-primary text-white p-4 rounded mb-6"> 你的留言已经提交成功了！</div>}
            { result && result.error && <div class="bg-red-600 text-white p-4 rounded mb-6"> 你的留言已经提交失败了，清稍后再试！</div>}
            <h1 class="text-center font-normal" set:html={markedLine(title)}/>
            <div class="section row pb-0">
                <div class="col-12 md:col-6 lg:col-7">
                    <form class="contact-form" method="POST" action={actions.contact_message}>
                        <div class="mb-3">
                            <input
                                    class="form-input w-full rounded"
                                    name="name"
                                    type="text"
                                    placeholder="Name"
                                    required
                            />
                        </div>
                        <div class="mb-3">
                            <input
                                    class="form-input w-full rounded"
                                    name="email"
                                    type="email"
                                    placeholder="Your email"
                                    required
                            />
                        </div>
                        <div class="mb-3">
                            <input
                                    class="form-input w-full rounded"
                                    name="subject"
                                    type="text"
                                    placeholder="Subject"
                                    required
                            />
                        </div>
                        <div class="mb-3">
              <textarea
                      class="form-textarea w-full rounded-md"
                      name="message"
                      rows="7"
                      placeholder="Your message"></textarea>
                        </div>
                        <button type="submit" class="sub-btn btn btn-primary"> Send Now</button>
                    </form>
                </div>
                <div class="content col-12 md:col-6 lg:col-5">
                    <h4 set:html={markedLine(info?.title)}/>
                    <p class="mt-4" set:html={markedLine(info?.description)}/>
                    <ul class="contact-list mt-5 list-none pl-0">
                        {
                            info?.contacts?.map((contact: string) => (
                                    <li>
                                        <strong class="text-dark" set:html={markedLine(contact)}/>
                                    </li>
                            ))
                        }
                    </ul>
                </div>
            </div>
        </div>
    </section>
</BaseLayout>
